@charset 'utf-8';
.header{
    width: 100%;
    height: 40px;
    .header-top{
        width: 100px;
        height: 0;
        display: block;
    }
    .header-middle{
        background-color: #333333;
        .center{
           a{
               display: inline-block;
               height: 40px;
               line-height: 40px;
               font-size: 12px;
               color: #b0b0b0;
               &:hover{
                   text-decoration: none;
                   color:white;
               }
           }
           >.header-a{
               position: relative;

               >.xiazai{
                   width: 130px;
                   height: 160px;
                   display: none;
                   position:absolute ;
                   top: 40px;
                   left: -40px;
                   box-shadow: 3px 3px 3px 3px #cccc;
                   background-color: white;


                >.jiantou{
                    height:7px;
                    width:7px;
                    border-color:transparent transparent white transparent;
                    border-style:solid;
                    border-width:7px;
                    position: absolute;
                    top: -13px;
                    left: 50px;

                }
                >.qucode{
                         >dl{
                      
                      >dt>img{
                       width: 110px;
                       margin: 10px;
                      }
                      >dd{
                        text-align: center;
                          color: black;
                          font-size: 14px;
                      }
                  }
                }
               }
               &:hover .xiazai{
                   display: block;
                   z-index: 8;
               }
           }
           
           span{
            display: inline-block;
            height: 40px;
            line-height: 40px;
            font-size: 12px;
            color: #b0b0b0;
            padding: 0 3px;
           }
           >.header-one{
            float: right;
            position: relative;
            >a{
               padding:0 30px;

            }
            >a:hover{
                background-color: white;
                color: red;
            }
            &:hover .shop-hide{
                display: block;
                z-index: 8;
                animation: changebg .4s;
            }
            @keyframes changebg {
                0% {
                 height: 0;
                }
                /* 这种语法 可以在0% 至 100%之间 添加任意的动画关键帧 */
                100% {
                  height: 80px;
                }
              }
            >.shop-hide{
                width: 316px;
                height: 80px;
                display: none;
                padding-top: 20px;
                position: absolute;
                top: 40px;
                right: 0;
                z-index: 9;
                box-shadow: 1px 3px 3px 3px #ccc;
                background-color: white;
                >p{
                    height: 40px;
                    line-height: 40px;
                    text-align: center;
                }
            }
           }
           >.header-two{
            float: right;
            padding-right: 5px;
            ul{
                
                color: #b0b0b0;
                >li{
                    list-style: none;
                    float: left;
                    height: 40px;
                    line-height: 40px;
                    font-size: 12px;
                    padding: 0 10px;
                    &:hover{
                        color: white;
                    }
                }
                >span{
                    display: block;
                    float: left;
                }
            }
            
           }
        }
    }
   
}
// 第二部分 
.cabinet{
    width: 100%;
    height: 80px;
    position: relative;

    .center{
        // background-color: aqua;
        >ul{
            list-style: none;
            >li{
                float: left;
                >.show-hide{
                    display: none;
                 position: absolute;
                 top: 80px;
                 left: 0;
                 width: 100%;
                 height: 288px;
                 border-top: 1px solid #333333;
                 background-color: white;

                 >div{
                     margin: 0 auto;
                     width: 1226px;;
                     height: 100%;
                     .show-a-one{
                         >img{
                             border: none;
                         }
                     }
                     >a{
                         display:block;
                         float: left;
                         width: (floor(1200px/6));
                         height: 100%;
                         text-align: center;
                         color: black;
                         >p{
                             line-height: 1;
                         }
                         :nth-child(3){
                             color: red;
                         }
                        >img{
                            border-right: 1px solid #333333;
                            margin:40px 0;
                        }
                        


                     }
                 }
                }
                &:hover .show-hide{
                    display: block;
                    border-top: 1px solid #ccc;
                    z-index: 10;
                    animation: change .2s;
                }

                @keyframes change {
                    0% {
                     height: 0;
                    }
                    
                    /* 这种语法 可以在0% 至 100%之间 添加任意的动画关键帧 */
                    100% {
                      height: 288px;
                    }
                  }
                >a{
                 display: block;
                 height: 80px;
                 padding: 0 10px;
                 color: black;
                 line-height: 80px;
                 &:hover{
                     text-decoration: none;
                     color: red;
                 }

                }
            }
            >li:nth-child(1){
             >a{
                 display: block;
                 width: 56px;
                  background-image: url(../images/logo-mi2.png);
                  background-repeat: no-repeat;
                  background-size: 56px;
                  background-position: 0 12px;
                  margin-right: 142px;
             }
            }
        }
        >div{
            
            float: right;
            >a{
                display: block;
                float: right;
                border: 1px solid black;
                margin-top: 15px;
                text-decoration: none;
                color: gray;
                padding:0 3px;
                    width: 52px;
                    height: 50px;
                    text-align: center;
                    line-height: 50px;
                    .icon-sousuo{
                        font-size: 20px;
                        font-weight: 800;
                    }
                    &:hover{
                        background-color: #FF6700;
                        color: white;
                    }
                    
                
            
            }
            >b{
                position: relative;
                font-weight: 500;
                display: block;
                float: right;
                .cabinet-a-two{
                    margin-top: 15px;
                    width: 245px;
                    height: 50px;
                    line-height: 50px;
                    outline: 0;
                    border: 1px solid black;
                    text-indent: 5px;
                }
                >.input-hide{
                    display: none;
                    position: absolute;
                    top: 65px;
                    left: 0;
                    width: 245px;
                    border: 1px solid #FF6700;
                    background-color: white;
                    z-index: 99;
                    >ul{
                        list-style: none;
                        li{
                            width: 100%;
                            height: 30px;
                            >a{
                                display: block;
                                width: 100%;
                                height: 100%;
                                line-height: 30px;
                                 text-indent: 5px;


                              color: gray;
                              &:hover{
                                  text-decoration: none;
                                  background-color: #dbd8d6;
                              }
                            }
                        }
                    }
                }
            }
        }
    }
}
// 第三部分 banner
.banner{
    width: 100%;
    height: 460px;
    .center{
        position: relative;
        .ban-left{
           width: 234px;
          height: 460px;
       position: absolute;
       top: 0;
       left: 0;
       z-index: 8;
       background-color: #b0b0b0;

       >ul{
           >li:nth-child(1){
               margin-top: 20px;
           }
           >li{
               width: 100%;
               height: 42px;
               
                &:hover .ban-hide{
                    display: block;
                    z-index: 10;
                }
               >a{
                   display: block;
                   width: 100%;
                   height: 100%;
                   line-height: 42px;
                   text-indent: 2rem;
                   color: white;
                   &::after{
                    content:"  > ";
                    float: right;
                    margin-right: 20px;
                    color: white;
                    font-size: 20px;
                    vertical-align: middle;
                 }
                   &:hover{
                       background-color: #FF6700;
                       text-decoration: none;
                   }
               }
               >.ban-hide{
                   width: 992px;
                   height: 460px;
                   position: absolute;
                   top: 0;
                   left: 230px;;
                   background-color: white;
                   display: none;
                  >ul{
                      float: left;
                      width: 248px;
                      height: 100%;
                      >li{
                          width: 100%;
                          height:(floor(460px/6));
                          >a{
                              display: block;
                              width: 100%;
                              height: 100%;
                              color: black;
                              text-align: center;
                              line-height:( floor(460px/6)) ;
                              &:hover{
                                  text-decoration: none;
                                  color: red;
                              }
                              >img{
                                  display: inline-block;
                                  width: 50px;
                                  height: 50px;
                              }
                          }
                      }
                  }
               }
           }
        
       }

        }
        .ban-right{
          width: 100%;
          height: 460px;
          >.container{
            width: 100%;
            height: 460px;
              >.carousel{
                width: 100%;
                height: 460px;
                  >.left{
                     
                          position: absolute;
                          top: 0;
                          left: 200px;
                     
                  }
              }
          }
        }

    }
}
//  第四部分
.picture{
    width: 100%;
    height: 200px;
    background-color: white;
    padding: 10px 0;
    >.center{
      >ul{
          width: 234px;
          height: 100%;
          float: left;
          >li{
              width: 76px;
              height: 85px;
              list-style: none;
              float: left;
              background-color: #5F5750;
              border: 1px solid rgb(150, 146, 146);

              >a{
                  width: 70px;
                  height: 64px;
                  display: block;
                  text-align: center;
                  text-align: center;
                  color: #b0b0b0;
                  font-size: 12px;
                  &:hover{
                      color: white;
                      text-decoration: none;
                  }
                  >img{
                      width: 24px;
                      height: 24px;
                      margin:20px 23px 0 23px;
                  }
              }
          }
      }
      >.pic-right{
        float: right;
        width: 992px;
        height: 170px;
        >a{
            display:inline-block;
            width: (floor((930px/3)));
            height: 100%;
            margin-left: 15px;
            >img{
                width: 100%;
                height: 170px;
            }
        }
      }

    }
}
//   第五部分
.pro{
    width: 100%;
    padding: 20px 0;
    background-color: #F5F5F5;
    >.center{
      
        >.pro-one{
            padding-bottom: 30px;
            >a{
                width: 100%;
                height: 120px;
                display: block;
                >img{
                    width: 1226px;
                }
               
            }
        }
        >.pro-two{
            padding-bottom: 30px;
            >.pro-two-top{
                >b{
                    height: 70px;
                    line-height: 70px;
                    display: block;
                    font-weight: 500;
                    float: left;
                    font-size: 30px;
                }
               >a{
                height: 70px;
                line-height: 70px;
                display: block;
                float: right;
                color: black;
                &:hover{
                    color: #FF6700;
                    text-decoration: none;
                }
               }
            }
            >.pro-two-bottom{
              width: 100%;
              height: 614px; 
              >.pro-two-left{
                width: 234px;
                height: 100%;
                float: left;
                background-color: white;
                >a{
                    display: block;
                    width: 100%;
                    height: 100%;
                    &:hover{
                        box-shadow: 3px 3px 3px 3px #b0b0b0;
                        text-decoration: none;
                    }
                    >img{
                        width: 234px;
                        height: 614px;
                    }
                }
              }
              >.pro-two-right{
                  width: 992px;
                  height: 100%;
                  float: right;
                  >a{
                      width: 234px;
                      height: 300px;
                      display:block;
                      float: left;
                      text-align: center;
                      margin:0 0 14px 14px;
                      color: black;
                      background-color: white;
                      &:hover{
                          box-shadow: 3px 3px 3px 3px #b0b0b0;
                          text-decoration: none;
                      }
                    
                      >img{
                          width: 160px;
                          height: 160px;
                          margin: 20px 37px;
                      }
                      >.pro-p-two{
                         color: #5F5750;
                         font-size: 12px;
                      } 
                       >.pro-p-three{
                          color: red;
                      }
                  }

              }
            }

        }

        >.pro-three{
            padding-bottom: 30px;
            >.pro-three-top{
                >b{
                    height: 70px;
                    line-height: 70px;
                    display: block;
                    font-weight: 500;
                    float: left;
                    font-size: 30px;
                }
               >a{
                height: 70px;
                line-height: 70px;
                display: block;
                float: right;
                color: black;
                &:hover{
                    color: #FF6700;
                    text-decoration: none;
                }
               }
            }
            >.pro-three-bottom{
              width: 100%;
              height: 614px; 
              >.pro-three-left{
                width: 234px;
                height: 100%;
                float: left;
                background-color: white;
                >a{
                    display: block;
                    width: 234px;
                    height: 300px;
                    margin-bottom: 14px;
                    &:hover{
                        box-shadow: 3px 3px 3px 3px #b0b0b0;
                        text-decoration: none;
                    }
                    >img{
                        width: 234px;
                        height: 300px;
                    }
                }
              }
              >.pro-three-right{
                  width: 992px;
                  height: 100%;
                  float: right;
                  >a{
                      width: 234px;
                      height: 300px;
                      display:block;
                      float: left;
                      text-align: center;
                      margin:0 0 14px 14px;
                      color: black;
                      background-color: white;
                      &:hover{
                          box-shadow: 3px 3px 3px 3px #b0b0b0;
                          text-decoration: none;
                      }
                    
                      >img{
                          width: 160px;
                          height: 160px;
                          margin: 20px 37px;
                      }
                      >.pro-p-two{
                         color: #5F5750;
                         font-size: 12px;
                      } 
                       >.pro-p-three{
                          color: red;
                      }
                  }

              }
            }

        }
        >.pro-four{
            >.four-left{
                width: 234px;
                float: left;
                >img{
                    width: 234px;
                    display: block;
                    &:hover{
                        box-shadow: 3px 3px 3px 3px #b0b0b0;
                         
                    }
                }
                >h1{
                    height: 70px;
                    line-height: 70px;
                    display: block;
                    font-weight: 500;
                    float: left;
                    font-size: 30px;
                }
            }
            >.four-right{
                position: relative;
                width: 992px;
                float: left;
              
                >ul{
                    padding: 20px 0 10px 0;
                    list-style: none;
                    >li{
                        >a{
                            display:block;
                            width: 50px;
                            text-align: center;
                            line-height: 70px;
                            float: right;
                            height: 70px;
                            color: black;
                            font-size: 17px;
                            &:hover{
                            color: #FF6700;
                            text-decoration: none;
                            }
                        }

                        >div{
                            padding-top: 40px;
                            width: 992px;
                            position: absolute;
                            top: 60px;
                            left: 0;
                            display: none;
                            >a{
                                
                                    width: 234px;
                                    height: 300px;
                                    display:block;
                                    float: left;
                                    text-align: center;
                                    margin:0 0 14px 14px;
                                    color: black;
                                    background-color: white;
                                    &:hover{
                                        box-shadow: 3px 3px 3px 3px #b0b0b0;
                                        text-decoration: none;
                                    }
                                  
                                    >img{
                                        width: 160px;
                                        height: 160px;
                                        margin: 20px 37px;
                                    }
                                    >.pro-p-two{
                                       color: #5F5750;
                                       font-size: 12px;
                                    } 
                                     >.pro-p-three{
                                        color: red;
                                    }
                                }
                            >a:last-child{
                                display: block;
                                width: 234px;
                                height: 143px;
                                padding: 50px 0 50px;
                                >div:nth-child(1){
                                    
                                    float: left;
                                    line-height:1;
                                    >p:nth-child(1){
                                        font-size: 20px;
                                        text-indent: 30px;
                                    }
                                    >p:nth-child(2){
                                        font-size: 12px;
                                        color: #757575;
                                    }
                                }
                                >div:nth-child(2){
                                    float: right;
                                    >span{
                                        font-size: 50px;
                                        color:#F25807;
                                        line-height: 1;
                                        padding-right: 30px;
                                    }
                                }
                                
                            }
                            
                        }
                        &:hover .dis-a{
                            display: block;
                        }
                        >#four-show{
                            display: block;
                        }

                       
                    }
                }
     
               
            }
        }
  
    }
}
// footer
.footer{
    >.foo-top{
        width: 100%;
        >.center{
            >.foo-roof{
                border-bottom: 1px solid #ccc;

              >a{
                  display: inline-block;
                width:(floor(1170px/5));
                height: 80px;
                line-height: 80px;
                font-size: 16px;
                color: #616161;
                text-align: center;
                &:hover{
                    text-decoration: none;
                    color: #FF6A00;

                }
                >span{
                    font-size: 24px;
                }
            
              }
              >span{
                  color: #ccc;
                  font-size: 20px;
              }
            }
            >.foo-base{
              >ul{
                  width: 160px;
                  float: left;
                  padding: 40px 0;
                  >li:nth-child(1){
                      >h1{
                          font-size: 14px;
                          font-weight: 500;
                          margin-bottom: 26px;

                      }
                  }
                  >li{
                      >a{
                          font-size: 12px;
                          display: block;
                          line-height: 1;
                          margin: 10px 0;
                          color: #757575;
                          &:hover{
                              color: #F25807;
                              text-decoration: none;
                          }
                      }
                  }
              }
              >.foo-base-right{
                  width: 252px;
                  float: right;
                  margin-top: 60px;
                  border-left:1px solid #e0e0e0;
                  >p{
                      display: block;
                      margin: 0 0 5px;
                      text-align: center;
                  }
                  >p:nth-child(1){
                     font-size:22px;
                     line-height: 1;
                     color: #F25807;
                  }
                  >p:nth-child(2){
                      font-size: 12px;
                      color: #616161;
                  }
                  >p:nth-child(3){
                      >a{
                          display: block;
                          width: 120px;
                          height: 30px;
                          border: 1px solid #F25807;
                          line-height: 30px;
                          margin-left: 66px;
                          color: #F25807;
                          background-color: white;
                          text-align: center;
                          &:hover{
                              text-decoration: none;
                              background-color: #F25807;
                              color: white;
                          }
                      }
                  }
                  >p:nth-child(4){
                      text-align: center;
                      >a{
                        color: #616161;
                        &:hover{
                            color: #F25807;
                        }
                      }
                }
              }






            }
        }
    }

}

.footer-bottom{
    padding: 30px 0 60px 0;
    width: 100%;
    height: 265px;
    background-color: #FAFAFA;
    font-size: 12px;
    >.center{
        position: relative;
        >.foo-bot-left{
            float: left;
           >img{
               display: block;
               margin-right: 20px;
               width: 56px;
               height: 56px;
           }

        }
        >.foo-bot-right{
            float: left;
            >p{
                >p:nth-child(1){
                    >a{
                        color: #333333;
                    }
                }
                >p:nth-child(2){
                    color: #333333;

                }

                >p:nth-child(3){
                   color: #b0b0b0;
                   >a{
                    color: #b0b0b0;;
                }
                }
                >p:nth-child(4){
                   color: #b0b0b0;
                   >a{
                    color: #b0b0b0;;
                }
                }
                >p:nth-child(5){
                   color: #b0b0b0;
                   >a{
                    color: #b0b0b0;;
                }
                }
                >p:nth-child(6){
                   color: #b0b0b0;
                   >a{
                    color: #b0b0b0;;
                }
                }
                color: #757575;
                >a{
                    font-size: 12;
                    color: #757575;
                    &:hover{
                        text-decoration: none;
                        color: #F25807;
                    }
                }
            }
            >div{
                width: 100%;
                height: 19px;
                position: absolute;
                top: 200px;
                left: 0;
                text-align: center;
                color: #BFBFBF;
                font-size: 20px;
            }
            
        }
    }
}
//   固定定位
body{
    position: relative;
}
.div-fiexd{

    position: fixed;
    bottom: 70px;
    right: 0;
    z-index: 99;
    >a{

        display:block;
        width: 80px;
        height: 80px;
        color: #757575;
        text-align: center;
        border: 1px solid #ccc;
        background-color: white;
        padding: 14px 0 0 0;
       >p{
           line-height: 1;
       }
        >p>span{
              font-size: 30px;
        }
        &:hover{
            text-decoration: none;
            color: #F25807;
        }
        >.d-hide{
            display: none;
            position: absolute;
            top: 0;
            right: 100px;
           padding: 10px;
            background-color: white;
            >img{
                width: 100px;
                height: 100px;
            }
        }
       
    }
    >.f-a-one:hover >.d-hide{
        display: block;
        color: #333333;
    } 

}
//  协议声明
.http{
    
    width: 1000px;
    height: 600px;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    background-color: white;
    z-index: 999;
    display: none;
    >.http-top{
        width: 90%;
        margin: 0 auto;
        background-color: #F5F5F5;
        >div:nth-child(1){
            float: left;
            >h1{
                font-size: 20px;
            }
        }
        >div:nth-child(2){
            float: right;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: white;
            text-align: center;
            line-height: 30px;
            margin: 10px 0 0 0;
            &:hover{
                color: white;
                background-color: #F25807;
            }
        }

    }
    >.http-bottom{
        clear: both;
        >div:nth-child(1){
            width: 90%;
            margin: 0 auto;
            >a{
                text-decoration: none;
                color: #F25807;
            }
        }
        >div:nth-child(2){
            box-sizing: border-box;
            width: 90%;
            margin: 0 auto;
          height: 350px;
        //   background-color: aqua;
        overflow: scroll;
        }
    }
    >.http-footer{
        width: 100%;
        height: 80px;
        background-color: #F5F5F5;
       >div{
           width: 420px;
           padding: 15px 0;
        margin: 0 auto;
        >a{
            display: block;
            color: white;
            width: 200px;
            height: 50px;
            float: left;
            text-align: center;
            line-height: 50px;
            &:hover{
                text-decoration: none;
            }
        }
        >a:nth-child(1){
           background-color: #F25807;
        }
        >a:nth-child(2){
            background-color: #ccc;
            margin-left: 20px;
        }
       }

    }
}